<template>
  <div class="in-master-print" ref="print">
    <div v-for="(item,index) of printData" :key="index" :id="'printDiv' + index" style="page-break-after:always;">

   <div class="print-mid">
      <div class="mid-l">
        <h3>南京星指针软件</h3>
        <h2>{{item.title}}</h2>
        <p><label>单据编码：</label>
          <span>{{item.wmCode}}</span>
        </p>
        <p><label>入库日期：</label>
          <span>{{item.inWmDate}}</span>
        </p>
        <P>
          <label>仓库：</label>
          <span>{{item.warehouse}}</span><span style="display: inline-block;margin-left: 15px;">{{item.bredVouch|filterBredVouch}}</span>
        </P>
      </div>

     <div class="mid-m"  v-if="item.bredVouch==0">
        <p><label>业务部门：</label>
          <span>{{item.workDept}}</span>
        </p>
        <p v-if="item.workType=='0'||item.workType=='1'||item.workType=='2'">
          <label>订单号：</label>
          <span>{{item.omCode}}</span>
        </p>
        <p v-if="item.workType=='0'">
          <label>供方：</label>
          <span>{{item.supplier}}</span>
        </p>
        <p v-if="item.workType=='1'">
         <label>加工设备：</label>
         <span>{{item.productionLine}}</span>
        </p>
        <p v-if="item.workType=='2'">
          <label>外协厂家：</label>
          <span>{{item.outSource}}</span>
        </p>
        <p  v-if="item.workType=='3'">
          <label>其它订单号：</label>
          <span>{{item.otCode}}</span>
        </p>
        <p >
          <label>备注：</label>
          <span>{{item.remarks}}</span>
        </p>
      </div>
      <!-- 红字 -->
      <div class="mid-m"  v-if="item.bredVouch==1">
         <p><label>业务部门：</label>
           <span>{{item.workDept}}</span>
         </p>
         <p v-if="item.workType=='0'||item.workType=='1'||item.workType=='2'">
           <label>订单号：</label>
           <span>{{item.omCode}}</span>
         </p>
         <p v-if="item.workType=='0'">
           <label>销售客户：</label>
           <span>{{item.customer}}</span>
         </p>
         <p v-if="item.workType=='1'">
          <label>加工设备：</label>
          <span>{{item.productionLine}}</span>
         </p>
         <p v-if="item.workType=='2'">
           <label>外协厂家：</label>
           <span>{{item.outSource}}</span>
         </p>
         <p  v-if="item.workType=='3'">
           <label>其它订单号：</label>
           <span>{{item.otCode}}</span>
         </p>
         <p >
           <label>备注：</label>
           <span>{{item.remarks}}</span>
         </p>
       </div>
       <!-- 黄字 -->
       <div class="mid-m"  v-if="item.bredVouch==2">
          <p >
            <label>备注：</label>
            <span>{{item.remarks}}</span>
          </p>
        </div>
      <div class="mid-r">
        <img src="../../assets/images/ewm.png" />
      </div>
    </div>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th v-if="item.wmSort.sortAttrMerge==1">物料名称</th>
          <th v-if="item.wmSort.sortAttrMerge==0">物料名称</th>
          <th v-if="item.wmSort.sortAttrMerge!==1">{{item.wmSort.sortAttrAlia}}</th>
          <th>主计量</th>
        <th v-if="item.wmSpecail.length>0&&item.wmSpecail[0].status=='0'">{{item.wmSpecail[0].name}}</th>
          <th v-if="item.wmSpecail.length>1&&item.wmSpecail[1].status=='0'">{{item.wmSpecail[1].name}}</th>
          <th v-if="item.wmSpecail.length>2&&item.wmSpecail[2].status=='0'">{{item.wmSpecail[2].name}}</th>
          <th v-if="item.wmSpecail.length>3&&item.wmSpecail[3].status=='0'">{{item.wmSpecail[3].name}}</th>
          <th v-if="item.wmSpecail.length>4&&item.wmSpecail[4].status=='0'">{{item.wmSpecail[4].name}}</th>
          <th>数量</th>
          <th v-if="item.priceStatus">单价</th>
          <th v-if="item.priceStatus">金额</th>
          <th v-if="item.locationStatus">货位</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody v-if="item.wmInSalveList.length>0">
        <tr v-for="(material,id) in item.wmInSalveList" :key="id">
          <td>{{material.id}}</td>
          <td>{{material.invCode}}</td>
          <td v-if="item.wmSort.sortAttrMerge==1">{{material.invName}}{{material.invAttribute}}</td>
          <td v-if="item.wmSort.sortAttrMerge==0">{{material.invName}}</td>
          <td v-if="item.wmSort.sortAttrMerge!==1">{{material.invAttribute}}</td>
          <td>{{item.unitName}}</td>
         <td v-if="item.wmSpecail.length>0&&item.wmSpecail[0].status=='0'">{{material.f1}}</td>
          <td v-if="item.wmSpecail.length>1&&item.wmSpecail[1].status=='0'">{{material.f2}}</td>
          <td v-if="item.wmSpecail.length>2&&item.wmSpecail[2].status=='0'">{{material.f3}}</td>
          <td v-if="item.wmSpecail.length>3&&item.wmSpecail[3].status=='0'">{{material.f4}}</td>
          <td v-if="item.wmSpecail.length>4&&item.wmSpecail[4].status=='0'">{{material.f5}}</td>
          <td>{{material.quantity}}</td>
          <td v-if="item.priceStatus">{{material.price}}</td>
          <td v-if="item.priceStatus">{{material.amount}}</td>
          <td v-if="item.locationStatus">{{material.location}}</td>
          <td>{{material.remarks}}</td>
        </tr>
      </tbody>
    </table>
    <div class="print-bot">
      <div class="bot-l">
        <label>制单人：</label>
        <span>{{item.warehouseOper}}</span>
      </div>
      <div class="bot-m">
        <label>审核人：</label>
        <span>{{item.warehouseCheck}}</span>
      </div>
      <div class="bot-r">
        <label>打印日期：</label>
        <span>{{item.printTime}}</span>
      </div>
    </div>
     </div>
  </div>

</template>

<script>
  //打印js
  import print from "print-js";
  export default {
    data() {
      return {

      }
    },
    props: {
      // 打印数据
      printData: {
        type: Array,
        default () {
          return []
        }
      },
      // 标题
      title: {
        type: String,
        default () {
          return "入库单"
        }
      },
      //特殊属性
      wmSpecail: {
        type: Array,
        default () {
          return []
        }
      },
      // 货位状态
      locationStatus: {
        type: Boolean,
        default () {
          return true;
        }
      },
      // 单价状态
      priceStatus: {
        type: Boolean,
        default () {
          return true;
        }
      },
      //仓库对应分类信息
      wmSort: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    mounted() {
      this.$print(this.$refs.print);
    },
    filters: {
      filterBredVouch(n) {
        switch (n) {
          case 0:
            return "蓝字";
            break;
          case 1:
            return "红字";
            break;
            case 2:
              return "黄字";
              break;
          default:
            return "蓝字"
        }
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @media print {
    .in-master-print {
      display: block !important;

    }
  }

  .in-master-print {
    label {
      font-weight: normal;
    }
    display: none;
    .print-top {
      position: relative;
      height: 40px;
      line-height: 40px;

      p {
        position: absolute;
        left: 15px;
        margin: 0;
      }

      h2 {
        text-align: center;
      }
    }

    .print-mid {
      display: flex;
      justify-content:space-between;
      margin-bottom: 15px;
      position: relative;
      height: 170px;

      p,h2,h3{
        margin: 0px 0 10px 0;
        padding: 0;
      }

      .mid-l{
        left: 0;
        h3{
          font-size: 18px;
          color: #606266;
        }
      }
      .mid-m{
        margin-top: 43px;
      }
      .mid-r{
        right: 0;
        // img{
        //   display: block;
        //   margin-top: 48px;
        // }
      }
    }

    .print-bot {
      position: relative;
      text-align: center;

      .bot-m {
        display: inline-block;
      }

      .bot-l,
      .bot-r {
        position: absolute;
        top: 0;
      }

      .bot-l {
        left: 0px;

      }

      .bot-r {
        right: 0px;
      }
    }

    table {
      width: 100%;
      margin-bottom: 20px;
      border-left: 1px solid #ccc;

      th {
        text-align: center;
        font-size: 14px;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      td {
        text-align: center;
        font-size: 13px;
        color: #606266;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 5px;
      }
    }
  }
</style>
